<template>
  <div class="detailPage pd-20 mg-10">
    <div class="backBtn">
      <Back width="18px" hight="18px" />
      <ElButton class="btn" @click="mapClick()">缩小</ElButton>
    </div>
    <ElTabs v-model="activeName" class="detail-text" @tab-click="handleClick">
      <ElTabPane label="任务详情" name="first">
        <div class="page">
          <div style="width: 12%; border-right: 1px solid #e4e4e7">
            <span class="labelText">任务进度：</span>
            <div class="timelineProcessBox">
              <!-- <el-steps direction="vertical">
                <el-step
                  :icon="activity.done ? 'CircleCheck' : 'Warning'"
                  v-for="(activity, index) in activities"
                  :key="index"
                  :status="activity.done ? 'success' : 'wait'"
                >
                  <template #title>
                    <span>
                      {{ activity.time }}
                    </span>
                    <p>
                      {{ activity.content }}
                    </p>
                  </template>
                </el-step>
              </el-steps> -->
              <ElSteps direction="vertical">
                <ElStep
                  :icon="CircleCheck"
                  v-for="(activity, index) in activities"
                  :key="index"
                >
                  <template #title>
                    <span>
                      {{ activity.executeTime }}
                    </span>
                    <p>
                      {{ activity.processName }}
                    </p>
                  </template>
                </ElStep>
              </ElSteps>
            </div>
          </div>

          <div style="width: calc(88%)">
            <mapPosition
              style="
                width: 100%;
                height: 90vh;
                padding-bottom: 20px;
                margin-left: 20px;
              "
              :wayPoints="wayPoints"
            />
            <!-- <div
              style="
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
              "
            >
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  justify-content: flex-start;
                  width: 100%;
                  padding: 20px;
                  border-top: 1px solid #e4e4e6;
                "
              >
                <p style="font-size: 16px; font-weight: 500; color: #303133">
                  <span> 巡点一 </span>
                  <span style="margin-left: 10px"> 异常一 </span>
                </p>
                <div
                  style="
                    display: flex;
                    align-items: flex-start;
                    justify-content: flex-start;
                    font-size: 12px;
                    color: #606266;
                  "
                >
                  <div class="img-text">
                    <img src="../../../../assets/u4660.png" alt="" />
                    <div style="margin: 10px">
                      <div
                        style="
                          display: flex;
                          justify-content: space-between;
                          line-height: 14px;
                        "
                      >
                        <span>2025-03-22 15:30:23</span>
                        <span>人员聚集</span>
                      </div>
                      <div
                        style="
                          display: flex;
                          justify-content: space-between;
                          line-height: 14px;
                        "
                      >
                        <span>地址</span>
                        <span>路北区建国路新华广场1号出入口</span>
                      </div>
                      <div
                        style="
                          display: flex;
                          justify-content: space-between;
                          line-height: 14px;
                        "
                      >
                        <span>坐标</span>
                        <span>118.302553，40.455888</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
<script lang="ts" setup>
import {
  ElButton,
  ElTabs,
  ElTabPane,
  ElRow,
  ElCol,
  ElTimeline,
  ElTimelineItem,
  ElSteps,
  ElStep,
} from "element-plus";
import { CircleCheck } from "@element-plus/icons-vue";
import { reactive, ref, onMounted } from "vue";
import { getInspectionTaskDetail } from "#/api/task/inspectionTask";
import { router } from "#/router";
import mapPosition from "./map.vue";
const emit = defineEmits(["showMap"]);
const activeName = ref("first");
const activities = ref([]);
const wayPoints = ref([]); // 存储飞行轨迹数据

const handleClick = () => {
  //   console.log("click");
};
const mapClick = () => {
  emit("showMap", "1");
};

const getDetail = async () => {
  const params = {
    id: router.currentRoute.value.query.id,
  };
  const { data } = await getInspectionTaskDetail(params);
  activities.value = data.taskList;
  
  // 飞行轨迹数据
  if (data.wayPoints && data.wayPoints.length > 0) {
    wayPoints.value = data.wayPoints;
  }
};

onMounted(() => {
  // 获取进度列表
  getDetail();
});
</script>

<style scoped lang="scss">
.page {
  display: flex;
}

.el-col {
  margin-bottom: 20px;
}

.timelineProcessBox {
  margin-top: 20px;

  :deep(.el-step__title) {
    padding-bottom: 25px;
    line-height: 25px;
  }

  :deep(.el-step__line) {
    background-color: #c0c4cc;
  }

  span,
  p {
    font-size: 14px;
    font-weight: normal;
    color: #909399;
  }

  p {
    color: #303133;
  }
}

.img-text {
  box-sizing: border-box;
  margin: 10px 10px 0 0;
  border: 1px solid #ebeef5;
  border-radius: 4px;

  img {
    width: 330px;
    height: 210px;
  }
}

:deep(.el-step__icon) {
  color: #5cb87a;
}
</style>
